<template>
  <div class="app-container">
    <div style="display: flex;flex-wrap: nowrap;">
      <h3>投票管理</h3>
      <div style="width: 10px;"></div>
      <p>用于管理各小区的投票活动的信息手机</p>
    </div>
    <el-card>
      <el-form style="display: flex;flex-wrap: nowrap;" label-width="80px" :inline="true">
        <el-form-item>
          <label style="width: 100%;">小区名称</label>
          <el-select v-model="queryData.community_code" class="m-2" placeholder="请选择">
            <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">标签</label>
          <el-input v-model="queryData.title" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">类型</label>
          <el-select v-model="queryData.multi" placeholder="请输入">
            <el-option v-for="item in typeList" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">状态</label>
          <el-select v-model="queryData.status" placeholder="请输入">
            <el-option v-for="item in stateList" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="height: 50px;"></div>
      <div style="display: flex;justify-content: end;">
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </el-card>
    <div style="height: 30px;"></div>
    <!-- 第二张卡片 -->
    <el-card>
      <div style="display: flex;justify-content: end;"><el-button type="primary"
          @click="addFormRef.isShow = true">新增投票</el-button></div>
      <div style="height: 30px;"></div>
      <!-- 表格 -->
      <Table :table="ticketTable" :tableData="list" @del="del" @edit="addFormRef.edit($event)">
        <template #img_url="{ row }">
          <div style="width: 100%;" @click="seeBigImg(row)">
            <img :src="row.img_url" alt="" style="width: 100%;">
          </div>
        </template>
        <template #options="{ row }">
          {{ row.options?.length }}个
        </template>
        <template #community.name="{ row }">
          {{ seeAll(row.community_code) || row.community?.name }}
        </template>
        <template #sys_user.nickname="{ row }">
          {{ row.sys_user?.nickname }}
        </template>
        <template #multi="{ row }">
          {{ SeeType(row.multi) }}
        </template>
        <template #status="{ row }">
          {{ SeeState(row.status) }}
        </template>
        <template #start_time="{ row }">
          {{ new Date(row.start_time).toLocaleString() }}
        </template>
        <template #end_time="{ row }">
          {{ new Date(row.end_time).toLocaleString() }}
        </template>
        <template #create_time="{ row }">
          {{ new Date(row.create_time).toLocaleString() }}
        </template>
      </Table>
      <!-- 分页 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData" />
    </el-card>
    <addForm ref="addFormRef" @initData="initData" />
    <!-- 列表查看大图 -->
    <el-dialog v-model="isSeeImg" title="预览" append-to-body width="40%" @close="dialogImageUrl = ''">
      <img style="width: 100%;" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script setup>
import { usecommunityList } from '@/hooks/owners/member.js'
import { ticketTable, useType, useState } from '@/hooks/ticket/index.js'
import addForm from './addForm.vue';
import { ElMessage } from 'element-plus'
import Table from '@/components/Table/table';
import Pagination from '@/components/Table/Pagination';
import { ref, toRaw, onMounted } from 'vue'
import { getListApi, delListApi } from '@/api/ticket/index.js'
// ============================================================================
// 小区数据
const communityList = usecommunityList()
const defaultQueryData = {
  current: 1,
  pageSize: 2,
  community_code: '',
  title: '',
  multi: '',
  status: '',
}
// 搜索数据
let queryData = reactive({ ...defaultQueryData })
// 总数
const total = ref(0)
// 列表数据
const list = ref([])
const addFormRef = ref(null)

// ============================================================================================
const initData = async () => {
  // console.log(toRaw(queryData));
  const { data: { count, rows } } = await getListApi(toRaw(queryData))
  // console.log(rows);
  const tabList = rows.map(({ img_url, ...item }) => ({ img_url: import.meta.env.VITE_APP_BASE_IMG + (img_url ? img_url.split(',')[0] : '/public/dist/static/empty.1e2fbc24.png'), ...item }))
  total.value = count
  list.value = tabList
}

onMounted(() => {
  initData()
})

// 类型
const typeList = useType()
// 显示类型
const SeeType = (val) => typeList.find(item => item.value === val).label
// 状态
const stateList = useState()
// 显示状态
const SeeState = (val) => stateList.find(item => item.value === val).label
// 所有小区判断
const seeAll = (val) => {
  if (val === "all") return '所有小区'
  return false
}
// 搜索
const onSearch = () => {
  queryData.current = 1
  initData()
  ElMessage.success('搜索成功')
}

// 重置
const onReset = () => {
  queryData = Object.assign(queryData, defaultQueryData)
  initData()
  ElMessage.success('重置成功')
}

// 删除
const del = async (id) => {
  // console.log(id);
  await delListApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  initData()
}

// 列表点击看图
let isSeeImg = ref(false)
let dialogImageUrl = ref('')
const seeBigImg = (row) => {
  // console.log(row);
  dialogImageUrl.value = row.img_url
  isSeeImg.value = true
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 2%;
}
</style>